<template>
    <el-dialog
            title="订单详情"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible"
            v-if="dialogVisible"
            width="50%">
        <el-descriptions class="margin-top"  :column="2"  border>
            <el-descriptions-item label="订单编号">{{info.code}}</el-descriptions-item>
            <el-descriptions-item label="订单总价">￥{{info.totalPrice}}</el-descriptions-item>
            <el-descriptions-item label="收件人">{{info.receipt}}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{info.receiptPhone}}</el-descriptions-item>
            <el-descriptions-item label="配送地址" :span="2">{{info.shippingAddress}}</el-descriptions-item>
            <el-descriptions-item label="配送商户">{{info.merchantsName}}</el-descriptions-item>
            <el-descriptions-item label="配送日期">{{info.deliveryDate}}</el-descriptions-item>
            <el-descriptions-item label="寄语" :span="2">{{info.remarks}}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{info.note}}</el-descriptions-item>
        </el-descriptions>
        <el-divider>订单详情</el-divider>
        <el-table
                :data="info.details"
                :header-cell-style="{background:'#ebebeb',color:'#606266'}"
                style="width: 100%">
            <el-table-column
                    label="商品图片"
                    width="150">
                <template slot-scope="scope">
                    <el-image
                            style="width: 100px; height: 100px"
                            :src="scope.row.homeImg"
                            :preview-src-list="[scope.row.homeImg]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品名称">
                <template slot-scope="scope">
                    <el-link title="查看详细" @click="goInfo(scope.row)" type="primary">{{scope.row.goodsName}}</el-link>
                </template>
            </el-table-column>
            <el-table-column
                    prop="goodsPrice"
                    label="价格/元"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="number"
                    label="数量"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="totalPrice"
                    label="合计/元"
                    width="100">
                <template slot-scope="scope">
                    {{scope.row.goodsPrice*scope.row.number}}
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>

<script>
    import * as u from '@/util/util'
    import * as c from '@/util/config'

    export default {
        name: "info",
        data() {
            return {
                info:null,
                dialogVisible: false,
            }
        },
        created(){
            if(this.$util.getToken()==null || this.$util.getToken()==""){
                this.$message.success('请登录！');
                this.go(-1)
            }
        },
        methods: {
            //查看详细
            goInfo(item) {
                this.$router.push({path: '/home/goods_info/' + item.goodsId})
            },


            openDia(id) {
                //查询订单详细
                this.$HttpService.get("/info-order/get-by-id/"+id).then(res=>{
                    res.details=res.details.map(x=>{
                        x.homeImg=this.$util.getFileUrl(x.homeImg);
                        return x;
                    })
                    this.info=res;
                    this.dialogVisible = true;
                })

            },


        }
    }
</script>

<style scoped>

</style>
